// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1

Rectangle {
    width: 1000
    height: 720
    color:"#00000000"
    radius:5
    opacity: 1

    signal goToCamera()
    signal goToEmail()
    signal goToGallery()
    signal goToMaps()
    signal goToPower()
    signal goToRadio()
    signal goToSettings()
    signal openAvailableIcons()
    property string parentState

    Rectangle {
        id: availableRect
        x: 230
        y: 61
        width: 697
        height: 493
        color: "#205F88"
        radius: 19
        smooth: false
        opacity: 0
        border.color: "black"
        border.width: 1

        Row {
            id: available
            x: 26
            y: 46
            width: 400
            height: 200

            MouseArea{
                id: camera
                x: 148
                y: 14
                width: 72
                height: 72
                Image {
                    width: parent.width
                    height: parent.height
                    smooth: true
                    source: "Assets/dock/camera.png"
                }
                onClicked: {
                    if (availableButton.y === 21){
                        if (parent === icons){
                            parent = available
                        }
                        else{
                            parent = icons
                        }
                    }
                    else{
                        goToCamera()
                    }
                }
            }

            MouseArea{
                id: email
                y: 14
                width: 72
                height: 72
                Image {
                    width: parent.width
                    height: parent.height
                    smooth: true
                    source: "Assets/dock/email.png"
                }
                onClicked: {
                    if (availableButton.y === 21){
                        if (parent === icons){
                            parent = available
                        }
                        else{
                            parent = icons
                        }
                    }
                    else{
                        goToEmail()
                    }
                }
            }


            MouseArea{
                id: gallery
                y: 14
                width: 72
                height: 72
                Image {
                    width: parent.width
                    height: parent.height
                    smooth: true
                    source: "Assets/dock/gallery.png"
                }
                onClicked: {
                    if (availableButton.y === 21){
                        if (parent === icons){
                            parent = available
                        }
                        else{
                            parent = icons
                        }
                    }
                    else{
                        goToGallery()
                    }
                }
            }

            MouseArea{
                id: maps
                y: 14
                width: 72
                height: 72
                Image {
                    width: parent.width
                    height: parent.height
                    smooth: true
                    source: "Assets/dock/maps.png"
                }
                onClicked: {
                    if (availableButton.y === 21){
                        if (parent === icons){
                            parent = available
                        }
                        else{
                            parent = icons
                        }
                    }else{
                        goToMaps()
                    }
                }
            }

            MouseArea{
                id: power
                y: 14
                width: 72
                height: 72
                Image {
                    width: parent.width
                    height: parent.height
                    smooth: true
                    source: "Assets/dock/power.png"
                }
                onClicked: {
                    if (availableButton.y === 21){
                        if (parent === icons){
                            parent = available
                        }
                        else{
                            parent = icons
                        }
                    }
                    else{
                        goToPower()
                    }
                }
            }

            MouseArea{
                id: radio
                y: 14
                width: 72
                height: 72
                Image {
                    width: parent.width
                    height: parent.height
                    smooth: true
                    source: "Assets/dock/radio.png"
                }
                onClicked: {
                    if (availableButton.y === 21){
                        if (parent === icons){
                            parent = available
                        }
                        else{
                            parent = icons
                        }
                    }
                    else{
                        goToRadio()
                    }
                }
            }

            MouseArea{
                id: settings
                y: 14
                width: 72
                height: 72
                Image {
                    width: parent.width
                    height: parent.height
                    smooth: true
                    source: "Assets/dock/settings.png"
                }
                onClicked: {
                    if (availableButton.y === 21){
                        if (parent === icons){
                            parent = available
                        }
                        else{
                            parent = icons
                        }
                    }
                    else{
                        goToSettings()
                    }
                }
            }
        }

        Text {
            id: text1
            x: 256
            y: 7
            width: 78
            height: 14
            text: qsTr("Available Apps")
            font.pixelSize: 29
        }
    }

    Rectangle{
        id:background
        x: (parent.width - childrenRect.width) / 2
        y:620
        width:childrenRect.width
        height:childrenRect.height
        color:"#205F88"
        opacity: 0.8
        radius:6

        Row{
            id: icons
            spacing: 10
            height: 100
        }

        MouseArea{
            x: icons.width + 16
            y: 0
            width: 40
            height: 100

            Image{
                id: availableButton
                y: 20
                source: "Assets/dock/availableUp.png"
            }
            onClicked: {
                if(parentState=="MAIN")
                if (availableButton.y === 20){
                    availableRect.opacity = 1
                    availableButton.y = 21
                    availableButton.source = "Assets/dock/availableDown.png"
                    onOpenAvailableIcons()
                }
                else{
                    availableRect.opacity = 0
                    availableButton.y = 20
                    availableButton.source = "Assets/dock/availableUp.png"
                }
            }
        }
    }
}
